<template>
    <div class="animal-card-list-box" :style="{justifyContent:isPC}">
        <AnimalCard v-for="item in animalList" :item="item" class="animalCard-item"></AnimalCard>
    </div>
</template>

<script>
    import AnimalCard from "@/components/animal/AnimalCard";
    import {isPhone} from "@/util/common";
    export default {
        name: "AnimalCardList",
        components: {AnimalCard},
        props:{
          list:{
              require:true,
              type:Array
          }
        },
        data(){
            // 测试数据
            // {
            //     nick:"焦糖",
            //     sex:0,
            //     introduction:"贪吃猫,摆烂猫",
            //     schoolId:1,
            //     birthday:"2020-11-21",
            //     icon:"http://www.youlibin.top:8090/image/934453e.jpg.jpg",
            //     address:"四川省成都市成都信息工程大学21栋附近",
            //     sterlization_status:1,
            //     adopt_status:1,
            // },
            return{
                animalList:this.$props.list
            }
        },
        computed:{
            isPC(){
                let phone=isPhone()
                return phone?'center':"flex-start"
            }
        },
        watch:{
            list(newV){
                this.animalList=newV
            }
        },
        mounted() {

        }
    }
</script>

<style scoped lang="less">
    .animal-card-list-box{
        width:100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content:flex-start;
        .animalCard-item{
            flex: 1;
            margin: 20px;
        }
    }
</style>